<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box {
			width: 600px;
			height: 350px;
			border:6px solid #ccc;
			overflow: hidden;
			position: relative;
		}
		#wrap {
			width: 3000px;
			height: 350px;
			overflow: hidden;
			position: absolute;
			left: 0;
		}
		img {
			border: none;
			vertical-align: top;
			float: left;
		}
		#info div {
			width: 600px;
			height: 100px;
			position: absolute;
			top: 350px;
			background-color: #000;
			opacity: 0.7;
			color:#fff;
		}
		h1 {
			margin: 0;
			font-size: 20px;
			line-height: 36px;
		}
		p {
			margin: 0;
		}
	</style>
	<script>
	window.onload = function (){
		var oWrap = document.getElementById('wrap');
		var aImg = oWrap.getElementsByTagName('img');
		var oInf = document.getElementById('info');
		var aDiv = oInf.getElementsByTagName('div');
		var num = 0;

		//初始化
		aDiv[num].style.top = '250px';

		//执行循环
		fnTab();

		function fnTab(){
			setTimeout(function (){		//每次循环都停留时间

				doMove(aDiv[num], 'top', 10, 350, function(){
					//alert('第 '+ num +'个到达终点！');
					num ++;

					doMove(oWrap, 'left', 30, -600*num, function(){
						if (num == aDiv.length) {	//当此时num == aDiv.length时，此时已经滑到且显示最后一张（同第一张）图片了
							num = 0;
							oWrap.style.left = 0;
						};

						doMove(aDiv[num], 'top', 10, 250, function(){
							fnTab();			//上面三个doMove一直循环，所以用函数包着，每次到这里遇到fnTab又会从第一个doMove开始
						})
					});
				});
			},2000)	
		}		
	}

	function doMove(obj, attr, dir, target, endFn){
		clearInterval(obj.timer);
		dir = parseInt( getStyle(obj, attr) ) < target ? dir : -dir;
		obj.timer = setInterval(function(){
			var speed = parseInt( getStyle(obj, attr) ) + dir;
			if (speed > target && dir >0 || speed < target && dir <0) {
				speed = target;
			};
			obj.style[attr] = speed + 'px';
			if (speed == target) {
				clearInterval(obj.timer);
				endFn && endFn();
			};
		},50);
	}

	function getStyle(obj, attr){
		return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
	}
	</script>
</head>
<body>
	<div class="box">
		<div id="wrap">
			<img src="1.jpg" alt="" />
			<img src="2.jpg" alt="" />
			<img src="3.jpg" alt="" />
			<img src="4.jpg" alt="" />
			<img src="1.jpg" alt="" />			<!-- 最后一张再写一个第一张 --><!-- 最后一张再写一个第一张 -->
		</div>
		<div id="info">
			<div>
				<h1>离婚律师：第1集</h1>
				<p>1：擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东（吴秀波 饰）算阴沟里翻船了，老婆公然给他戴了绿帽子，更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p>
			</div>
			<div>
				<h1>离婚律师：第2集</h1>
				<p>2：擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东（吴秀波 饰）算阴沟里翻船了，老婆公然给他戴了绿帽子，更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p>
			</div>
			<div>
				<h1>离婚律师：第3集</h1>
				<p>3：擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东（吴秀波 饰）算阴沟里翻船了，老婆公然给他戴了绿帽子，更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p>
			</div>
			<div>
				<h1>离婚律师：第4集</h1>
				<p>4：擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东（吴秀波 饰）算阴沟里翻船了，老婆公然给他戴了绿帽子，更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p>
			</div>
		</div>
	</div>
</body>
</html>